<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
        <title>菜单管理</title>
        {''|getCommon} 
        {'easyui'|getPlugSingle}
		{'ztree'|getPlugSingle}
		<SCRIPT type="text/javascript">
		var zNodes ={$menuJsons};
		{literal}
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				removeTitle: "删除菜单",
				renameTitle: "编辑菜单"
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename
			}
		};
		var className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		//编辑之前提示确认编辑
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			//每次开启要为menuForm创建一个隐藏的pid
			$('#updateMenu').dialog('open');
			$('#updateMenuForm').form('clear');
			$('#updateMenuForm input[name="menuId"]').val(treeNode.id);
			$.post('queryMenuOne',{'menuId':treeNode.id},function(data){
				eval('var dataJson='+data);
				//先清空后加载
				$('#updateMenuForm').form('load', dataJson.menu[0]);
			});
			//return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
			return false;
		}
		//删除之前提示确认删除
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			
			$.messager.confirm('提醒', '你是否确认要删除该菜单吗?', function(r){
				if(r){
					$.post('delMenu', { 'menuId':treeNode.id} ,function(data){
						eval('var dataJson = '+data);
						if(dataJson.result==true){
							$.messager.show({
								title : '提示',
								msg :'您已成功删除了该菜单!'
							});
							window.location.reload();
						}else{
							$.messager.show({
								title : '提示',
								msg :'操作失败，请重试!'
							});
						}
					});
				}
			});
			return false;
		}
		function onRemove(e, treeId, treeNode) {
			alert('删除的时候执行！');
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			if (newName.length == 0) {
				alert("节点名称不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function(){zTree.editName(treeNode)}, 10);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode, isCancel) {
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='添加子菜单' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.selectNode(treeNode);
				
				$('#addMenu').dialog('open');
				$('#addMenuForm').form('clear');
				//每次开启要为menuForm创建一个隐藏的pid
				$('#addMenuForm input[name="menuParentId"]').val(treeNode.id);
				//增加一个子菜单的方法
				
				//zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		}
		
		$(document).ready(function(){
			var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
			treeObj.expandAll(true);
			$("#selectAll").bind("click", selectAll);
		});
		
		function addRootMenu(){
			$('#addMenu').dialog('open');
			$('#addMenuForm').form('clear');
			$('#addMenuForm input[name="menuParentId"]').val(0);
		}
		{/literal}
	</SCRIPT>
	<style type="text/css">
		{literal}
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
		{/literal}
	</style>
	</head>
    <body>
    	<div style="margin-bottom:5px">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addRootMenu();">添加根菜单</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="javascript:window.location.reload()">刷新</a>
		</div>
    	<div id="addMenu" class="easyui-dialog" title="添加新菜单" closed="true" style="width:300px;height:200px;padding:10px"
    	data-options="
				iconCls: 'icon-add',
				buttons: [{
					text:'确认',
					iconCls:'icon-ok',
					handler:function(){
						$('#addMenuForm').form('submit', {
							url : 'insertMenu',
							onSubmit : function() {
								return $(this).form('validate');//对数据进行格式化
							},
							success : function(data) {
								eval('var dataJson='+data);
								if(dataJson.result==true){
									$.messager.show({
										title : '提示',
										msg :'您已成功创建一个菜单'
									});
									$('#addMenu').dialog('close');
									window.location.reload();
								}else{
									$.messager.show({
										title : '提示',
										msg :'创建失败请重试！'
									});
								}
							}
						}); 
					}
				},{
					text:'取消',
					handler:function(){
						$('#addMenu').dialog('close');
					}
				}],
				onResize:function(){
					$(this).dialog('center');
				}
			">
			<form id="addMenuForm" method="post">
		    	<table cellpadding="5">
		    		<tr>
		    			<td>菜单名称:</td>
		    			<td><input name="menuParentId"  type="hidden"></input><input class="easyui-textbox" style="width:180px" type="text" name="menuName" data-options="prompt:'请输入3到20个英文内',required:true,validType:'length[3,20]'"></input></td>
		    		</tr>
		    		<tr>
		    			<td>菜单url:</td>
		    			<td><input class="easyui-textbox" style="width:180px" type="text" name="menuUrl"></input></td>
		    		</tr>
		    		<tr>
		    			<td>菜单描述:</td>
		    			<td><input class="easyui-textbox" style="width:180px" type="text" name="menuDesc" data-options="prompt:'请输入3到10个字内',required:true,validType:'length[3,10]'"></input></td>
		    		</tr>
		    		<tr>
		    			<td>菜单排序:</td>
		    			<td><input class="easyui-textbox" style="width:180px" type="text" name="menuOrder"></input></td>
		    		</tr>
		    	</table>
		    </form>
		</div>
		<div id="updateMenu" class="easyui-dialog" title="修改菜单信息" closed="true" style="width:300px;height:200px;padding:10px"
    	data-options="
				iconCls: 'icon-add',
				buttons: [{
					text:'确认',
					iconCls:'icon-ok',
					handler:function(){
						$('#updateMenuForm').form('submit', {
							url : 'updateMenu',
							onSubmit : function() {
								return $(this).form('validate');//对数据进行格式化
							},
							success : function(data) {
								eval('var dataJson='+data);
								if(dataJson.result==true){
									$.messager.show({
										title : '提示',
										msg :'您已成功修改一个菜单'
									});
									$('#updateMenu').dialog('close');
									window.location.reload();
								}else{
									$.messager.show({
										title : '提示',
										msg :'修改失败请重试！'
									});
								}
							}
						}); 
					}
				},{
					text:'取消',
					handler:function(){
						$('#updateMenu').dialog('close');
					}
				}],
				onResize:function(){
					$(this).dialog('center');
				}
			">
			<form id="updateMenuForm" method="post">
		    	<table cellpadding="5">
		    		<tr>
		    			<td>菜单名称:</td>
		    			<td><input name="menuId"  type="hidden"></input><input class="easyui-textbox" style="width:180px" type="text" name="menuName" data-options="prompt:'请输入3到20个英文内',required:true,validType:'length[3,20]'"></input></td>
		    		</tr>
		    		<tr>
		    			<td>菜单url:</td>
		    			<td><input class="easyui-textbox" style="width:180px" type="text" name="menuUrl"></input></td>
		    		</tr>
		    		<tr>
		    			<td>菜单描述:</td>
		    			<td><input class="easyui-textbox" style="width:180px" type="text" name="menuDesc" data-options="prompt:'请输入3到10个字内',required:true,validType:'length[3,10]'"></input></td>
		    		</tr>
		    		<tr>
		    			<td>菜单排序:</td>
		    			<td><input class="easyui-textbox" style="width:180px" type="text" name="menuOrder"></input></td>
		    		</tr>
		    	</table>
		    </form>
		</div>
    	<ul id="treeDemo" class="ztree"></ul>
    </body>
</html>
